<template>
    <div class="muilti-checkbox">
        <template v-if="action == 'table'  ">
            <ul style="list-style: none;padding:0">
                 <li class="button" v-for="button in show">
                      <el-tooltip class="item" effect="dark" :content="button.show" placement="top">
                              <router-link :to="getShowUrl(fieldLink.show,button.value)">
                                    {{button.show}}
                              </router-link>
                      </el-tooltip>
                 </li>
            </ul>

        </template>
        <template v-if="action == 'edit' || action == 'search' ">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
            <el-checkbox-group
                    style="width:100%"
                    :value="value"
                    @change="handleCheckedCitiesChange"
                    v-on="$listeners">
                <el-checkbox
                        v-for="item in option"
                        :key="item.value"
                        :label="item.value"
                        >
                    {{item.label}}
                </el-checkbox>

            </el-checkbox-group>

        </template>
    </div>
</template>
<script>
    //流程
    //1.先初始化下option下拉
    //2.如果已经有选中的. 先把他的值往option里面填充下(避免没有对应的option),然后选中.
    //3.搜索的时候  动态加载远程更多
    import base from './base.js';

    export default {
        extends: base,
        props: {
            fieldLink: {//连表的相关结构
                type: Object,
                require: true,
            },
            fieldOption: {//如果不远程连表的话,这个代表备选数据
                type: Array,
                default: function () {
                    return [];
                },
            },
            fieldKey: String,
        },
        data() {
            return {
                loading: false,
                checkAll: false,
                isIndeterminate: true,
                option: []//远程调用存储数据的地方,
            }
        },
        created() {
//            this.remote = this.fieldLink?true:false;
//            this.multiple=this.fieldMulti?true:false;
        },
        mounted() {
            //查看模式 ,不需要初始化了.编辑模式才需要option
            this.myValue = [];
            // console.info('fadfdfasdfads',this.value);
            if (this.action !== 'table') {
                this.remoteMethod(true);
            }
        },
        watch: {
            value: function (val) {
                if (this.action !== 'table') {
                    let selected = [];
                    //有值的话
                    // console.info('this.myValue',this.value);
                    if (typeof(this.value) == 'object' && typeof(this.value[0]) == 'object') {
                        // let option = [];
                        this.value.forEach(value => {
                            if (value[this.fieldLink.select[0]]) {
                                //作为备选option
                                this.setOption(value[this.fieldLink.select[0]], value, this.fieldLink.select);
                                //选中的
                                selected.push(value[this.fieldLink.select[0]]);
                            }
                            this.myValue = selected;

                        });
                    }
                }
            },
        },
        computed: {
            show() {
                //链表多选
                let name = [];
                this.value.forEach((value) => {
                    let tmpValue = '';
                    this.fieldLink.select.forEach((v, k) => {
                        if (k > 0 && v && value[v]) {
                            tmpValue += value[v] + ' ';
                        }
                    });
                    name.push({'show': tmpValue, 'value': value});
                });
                return name;
            }
        },
        methods: {
            handleCheckAllChange(val) {
                // console.info('全选',val);
                if (val) {
                    this.option.forEach(item => {
                        this.myValue.push(item.value);
                    })
                } else {
                    this.myValue = [];
                }
                this.isIndeterminate = false;
            },
            handleCheckedCitiesChange(value) {
                // console.info('单选',value);
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.option.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.option.length;
            },
            //初始化下拉框
            initOption() {
                // this.setOption();
                //只有编辑模式不需要option
                if (this.action !== 'edit') {
                    return false;
                }
            },

            getShowUrl(url, data) {
                return this.$larfree.replaceParm(url, data);
            },

            //添加新的option
            setOption(key, value, schema) {
                //如果是数字 就改成数字
                if (!isNaN(key))
                    key = key * 1;

                //先检查是否重复了
                let pass = true;
                this.option.forEach((option) => {
                    if (option.value === key) {
                        pass = false;
                    }
                });
                if (!pass) return;

                //如果schema存在,那就可能字段备选.
                if (schema) {
                    let tmpValue = '';
                    schema.forEach((v, k) => {
                        if (k > 0 && v && value[v]) {
                            tmpValue += value[v] + ' ';
                        }
                    });
                    value = tmpValue;
                }
                this.option.push({value: key, label: value});
                // console.info('this.option',this.option);
            },
            clearOption() {
                this.option = [];
                // this.setOption();
            },


            //远程读取数据,供给下拉
            remoteMethod(query) {
//                if (query !== '') {
                this.loading = true;
                let api = this.fieldLink.url;
                if (!api) {
                    console.log('remoteMethod:路径错误');
                }

                if (query) {
                    //有搜索条件的时候,api拼接
                    // let field = this.fieldLink.select.slice(0);
                    // let name = field.splice(1).join('|') + '$';
                    // let keyword = query;

                    query = {};
                    // query[name] = '%' + keyword + '%';
                    query['pageSize'] = 200;
                    api = this.$larfree.httpQuery(query, api);
                    this.clearOption();
                }

                this.$http.get(api)
                    .then((response) => {
                        response.data.data.map((value) => {
                            this.setOption(value[this.fieldLink.select[0]], value, this.fieldLink.select);
                        });
                        this.loading = false;
//                            this.debug.log(this.option);
                    })
                    .catch((error) => {
                        console.log(error, 'remoteMethod');
                    });
//                }
            }
        }

    }
</script>
<style lang="less">
    .muilti-checkbox{
        .el-checkbox+.el-checkbox{
            margin-right: 2px;
            margin-left: 0px !important;
        }
    }

</style>
<style scoped>
    .button {
        border: 1px solid #dcdfe6;
        padding: 3px;
        padding-left: 4px;
        border-radius: 5px;
        background: white;
        margin-bottom: 2px;
        text-align: center;
    }

    .button a {
        display: block;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        color: #606266;
    }

    .button a:hover {
        color: #409EFF;
    }

    img {
        width: 50px;
    }

    .el-select {
        width: 220px;
    }
</style>
